import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import { IndexItem } from './indexItem';
import { Center } from '../center/center';
import { Cart } from '../cart/cart';
import './index.scss'
import '../common/header.scss';
import '../../icon.scss';

export default class Index extends Component {

  constructor(props){
    super(props);
    this.state = {
      isFringe : 0,
      id:0,
      nickName:'',
      headimgurl:'',
      balance:0,
      mobile:'',
      integral:0,
      isLogin:1,
      current:0,
      mbotton:'68px',
      bottom:'66px'
    }
  }

  componentWillMount () {
    let that = this;
    Taro.getSystemInfo({
      success: res => {
        console.log(res);
        if(res.statusBarHeight === 44){
          that.setState({
            mbotton:'100px',
            bottom:'96px'
          });
        }
      }
    });
  }
  handleChangeTab(value){
    console.log(1111);
    this.setState({
      current:value
    });
  }

  render () {
    return (
      <View>
        {
          this.state.current === 0
          ?
          <IndexItem mb={this.state.mbotton}></IndexItem>
          :
          this.state.current === 1
          ?
          <Cart mb={this.state.mbotton} bm={this.state.bottom}></Cart>
          :
          this.state.current === 2
          ?
          <Center mb={this.state.mbotton}></Center>
          :''
        }
        <AtTabBar
          fixed
          selectedColor='#F2CA26'
          iconSize={30}
          fontSize={12}
          onClick={this.handleChangeTab.bind(this)}
          tabList={[
            { title: '商城', iconType: 'shangcheng', iconPrefixClass:'icon'},
            { title: '购物车', iconType: 'shopping-cart'},
            { title: '我的', iconType: 'user'}
          ]}
          current={this.state.current}
        />
      </View>
    )
  }
}
